<template>
    <div ref="canvas"></div>
</template>

<script setup lang="ts">
import { Chart, View } from '@antv/g2';
import { v4 } from 'uuid';
import { onMounted, onUnmounted, ref, shallowRef, watch } from 'vue';
type IDate = { count: number, day: string }
const prop = defineProps<{ data: IDate[], height: number, color?: string[] }>()
const tclass = v4()
const canvas = ref<HTMLDivElement>()
const chart = shallowRef<Chart>()



const _chart = shallowRef<View>()

watch(() => prop.data, () => {
    _chart.value?.changeData(prop.data);

    _chart.value?.render();
})



onMounted(() => {
    if (canvas.value) {
        chart.value = new Chart({
            container: canvas.value,
            autoFit: true,
            height: prop.height,
            padding: [10, 30, 30, 30]
        })
        chart.value.data(prop.data);
        chart.value.line().position('day*count')


        _chart.value = chart.value.interaction(tclass);
        chart.value.render();
    }
})

onUnmounted(() => {
    if (_chart.value)
        _chart.value.removeInteraction(tclass)
})

defineExpose({
    data: _chart.value
})

</script>